import React, { Component } from 'react'
import empty from "../../assets/images/empty.jpg";
import { NavBar } from "antd-mobile";
import './cart.scss'
export default class index extends Component {
    state = {
        carts: []
    }
    componentDidMount() {
        let carts_str = localStorage.getItem('carts')
        let carts = JSON.parse(carts_str || '[]')
        this.setState({
            carts
        })
    }
    render() {
        return (
            <div className='yg-cart'>
                {!!this.state.carts.length ? (
                    <div className="yg-cart-content">
                        <div>
                            <NavBar className="cart-content-nav">优购商城</NavBar>
                        </div>
                        {/* 购物小车列表开始 */}
                        <div className="cart-content-list">
                            {this.state.carts.map((v, index) => {
                                return (
                                    <div className="content-list-item" key={v.goods_id}>
                                        <div className="list-item-left">
                                            <i className="iconfont icon-shanchu-xuanzhong"></i>
                                        </div>
                                        <div className="list-item-mid">
                                            <img src={v.goods_small_logo} alt="" />
                                        </div>
                                        <div className="list-item-right">
                                            <div className="right-top">
                                                <div className="right-top-title">{v.goods_name}</div>
                                            </div>
                                            <div className="right-bottom">
                                                <div className="right-bottom-left">
                                                    ￥{v.goods_price}
                                                </div>
                                                <div className="right-bottom-right">
                                                    <i className="iconfont icon-iconset0187"></i>
                                                    <span className="num">{v.num}</span>
                                                    <i className="iconfont icon-icon-"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                        {/* 购物小车列表结束 */}
                        {/* 底部的结算栏开始 */}
                        <div className="cart-content-bottom">
                            <div className="all-checked">
                                <i className='circle'></i>
                                <span className="text">全选</span>
                            </div>
                            <div className="totalPrice">
                                <span className="text1">合计</span>
                                <span className="price">￥63773</span>
                            </div>
                            <div className="pay">
                                <span className="text3">去结算(1)</span>
                            </div>
                        </div>
                        {/* 底部的结算栏结束 */}
                    </div>
                ) : (
                        <div className="yg-cart-empty">
                            <img src={empty} className="cart-empty-img" alt="" />
                            <h3 className="empty_text">
                                <a href="#/category">去逛逛</a>
                            </h3>
                        </div>
                    )}
            </div>
        )
    }
}
